<script setup>
  import { ref } from "vue";

  defineProps({
    msg: String,
  });

  const count = ref(0);
</script>

<template>
  <h1>{{ msg }}</h1>
  <div class="card">
    <button type="button" class="button" @click="count++">
      count is {{ count }}
    </button>
  </div>
</template>

<style lang="scss" scoped>
  .read-the-docs {
    color: #888;
  }
  .button {
    background-color: skyblue;
    border: none;
    border-radius: 12px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
  }
  .button:hover {
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
      0 17px 50px 0 rgba(0, 0, 0, 0.19);
  }
</style>
